<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../vue.js"></script>
</head>
<body>

	<div id="app">
		<counter :count="2" @inc="handleIncrease"></counter>
		<counter :count="4" @inc="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>

	<script>

		var counter = {
			props: ['count'],
			data: function () {
				return{
					number: this.count
				}
			},
			template: '<div @click="handleClick">{{number}}</div>',
			methods: {
				handleClick: function () {
					this.number += 2;
					this.$emit('inc', 2);
				}
			}
		}

		var vm = new Vue({
			el: '#app',
			data: {
				total: 6
			},
			components: {
				counter: counter
			},
			methods: {
				handleIncrease: function (step) {
					this.total += step;
				}
			}
		});

	</script>
</body>
</html>